<!doctype html>
<html>
    <head>
        <title>Spa</title>
        <link rel="stylesheet" href="css/spa.css">
        <link rel="stylesheet" href="css/spa.shell.css">
        <style type="text/css">
            body {
                width : 100%;
                height : 100%;
                overflow : hidden;
                background-color: #777;
            }
            #spa {
                position : absolute;
                top : 8px;
                left : 8px;
                bottom : 8px;
                right : 8px;
                border-radius : 8px 8px 0 8px;
                background-color: #fff;
            }
            .spa-slider {
                position :absolute;
                bottom : 0;
                right : 2px;
                width : 300px;
                height: 16px;
                cursor: pointer;
                border-radius: 8px 0 0 0;
                background-color:  #f00;
            }
        </style>
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <script type="text/javascript" src="js/jq/jquery.uriAnchor.js"></script>        
        <script type="text/javascript" src="js/spa.js"></script>  
        <script type="text/javascript" src="js/spa.shell.js"></script>
        <script type="text/javascript">
            $(function(){
                spa.initModule($("#spa"));
            });
        </script>
    </head>
    <body>
        <div id="spa">
           <div class="spa-slider"></div>
        </div>
    </body>
</html>